@extends('layouts.admin')
@section('static-top')
    <script src="{{ asset('asset/js/echarts.min.js') }}"></script>
    <script src="{{ asset('asset/js/macarons.js') }}"></script>
    {{--<script src="{{ asset('asset/js/shine.js') }}"></script>--}}
@endsection
@section('content')
    <div class="container">
        <div class="row">
            <p style="font-size: 2.5rem;">{{ $survey->title }} 统计图表 <span style="font-size: 1rem;padding-left: 2rem"> 创建时间 : {{ $survey->create_at }} </span></p>
            <hr style="margin-top: 0" />
            <div class="row">
                <div class="col-md-12">
                    <div class="page-header">
                        <h2>参与总人数 <small> 按部门划分 </small></h2>
                    </div>
                    <div class="panel panel-default">
                        <div class="panel-body" id="dpt" style="height:30rem;">
                            Panel content
                        </div>
                    </div>
                </div>

                <hr>
                <div class="page-header">
                    <h2>选择题统计 <small> 按部门划分 </small></h2>
                </div>
                @foreach($questions as $k => $question)
                    @if($question->type != '文本')
                    <div class="col-md-12">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h3 class="panel-title">{{ $question->title }}</h3>
                            </div>
                            <div class="panel-body" id="answerCharts{{ $k }}" style="height: 30rem">
                                Panel content
                            </div>
                        </div>
                    </div>
                    @endif
                @endforeach


                <div class="col-md-12">
                    <div class="page-header">
                        <h2> 主观题汇总 <small> 按部门划分 </small></h2>
                    </div>
                    <!-- Nav tabs -->
                    <ul class="nav nav-tabs" role="tablist">
                        @foreach($dpt as $k => $d)
                            <li role="presentation" @if($k === 0) class="active" @endif><a href="#{{ $d->dpt }}" aria-controls="{{ $d->dpt }}" role="tab" data-toggle="tab">{{ $d->dpt }}</a></li>
                        @endforeach
                    </ul>

                    <!-- Tab panes -->
                    <div class="tab-content">
                        @foreach($dpt as $k => $d)
                            <div role="tabpanel" class="tab-pane @if($k === 0) active @endif" id="{{ $d->dpt }}">

                                {{--在这里循环答案--}}
                                <div class="panel-group" id="accordion{{ $k }}" role="tablist" aria-multiselectable="true">
                                    <span style="display: none;">{{ $i = 0 }}</span>
                                    @foreach($questions as $question)
                                        @if($question->type == '文本')
                                            <div class="panel panel-info">
                                                <div class="panel-heading" role="tab" id="headingOne">
                                                    <h4 class="panel-title">
                                                    <span role="button" data-toggle="collapse" data-parent="#accordion{{ $k }}" href="#{{ $d->dpt.$question->title }}" aria-expanded="@if($i === 0) true @else false @endif" aria-controls="{{ $d->dpt.$question->title }}">
                                                        {{ $question->title }}
                                                    </span>
                                                    </h4>
                                                </div>
                                                <div id="{{ $d->dpt.$question->title }}" class="panel-collapse collapse @if($i === 0) in @endif" role="tabpanel" aria-labelledby="headingOne">
                                                    <div class="list-group">
                                                        {{--<ul class="">--}}
                                                        @foreach($answers as $answer)
                                                            @if( $answer->question_id == $question->id && $answer->colleague->dpt == $d->dpt )
                                                                <span class="list-group-item">{{ $answer->answer_content }}</span>
                                                            @endif
                                                        @endforeach

                                                        {{--</ul>--}}
                                                    </div>
                                                </div>
                                            </div>

                                            <span style="display: none;"> {{ ++$i }} </span>
                                        @endif
                                    @endforeach

                                </div>






                            </div>
                        @endforeach

                    </div>

                </div>
            </div>
        </div>
    </div>
@endsection
@section('static-bottom')
    <script>
        //dpt chart
        // 基于准备好的dom，初始化echarts实例
        var _dpt = echarts.init(document.getElementById('dpt'), 'macarons');
        // 指定图表的配置项和数据
        var _dpt_option = {
            title : {
                text: '参与部门人数统计',
                subtext: '总人数: ' + {{ $nums }},
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: [
                        @foreach($dpt as $d)
                            '{{$d->dpt}}',
                        @endforeach
                ]
            },
            series : [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:[
                        @foreach($dpt as $d)
                        { value: {{ $d->nums }}, name:'{{ $d->dpt }}' },
                        @endforeach
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        _dpt.setOption(_dpt_option);


        //answerChart
        //循环生成不同部门的答案统计
        @foreach($questions as $k => $question)
        @if($question->type != '文本')

        var answerCharts_{{ $k }} = echarts.init(document.getElementById('answerCharts{{ $k }}'), 'macarons');
        // 指定图表的配置项和数据
        answerCharts_{{ $k }}.title = '堆叠柱状图';
        var answerCharts_option_{{ $k }} = {
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend: {
                data:[
                    @foreach($options as $option)
                        @if($option->question_id == $question->id)
                            '{{  $option->content }}',
                        @endif
                    @endforeach
                ]
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'category',
                    data : [
                        @foreach($dpt as $d)
                                '{{  $d->dpt }}',
                        @endforeach
                    ]
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series : [
                    @foreach($options as $option)
                    @if($option->question_id == $question->id)
                            {
                                name:'{{ $option->content }}',
                                type:'bar',
                                data:[
                                        @foreach($optionCounts as $optionCount)
                                            @if($optionCount['question_id'] == $question->id && $optionCount['id'] == $option->id)
                                                {{ join(',', array_values($optionCount['data'])) }}
                                            @endif
                                        @endforeach
                                ]
                            },
                    @endif
                    @endforeach

            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        answerCharts_{{ $k }}.setOption(answerCharts_option_{{ $k }});
        @endif
        @endforeach


    </script>
@endsection